<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>解压一刻 - 科学减压伴侣</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
  </head>
  <body>
    <div class="app-container">
      <!-- 顶部状态栏 -->
      <header class="app-header">
        <div class="pressure-index">
          <h3>今日压力指数</h3>
          <div class="pressure-meter">
            <div class="pressure-level" id="pressureLevel"></div>
          </div>
          <span id="pressureValue">--</span>
        </div>
        <div class="user-profile">
          <img src="assets/avatar.png" alt="用户头像" id="userAvatar" />
        </div>
      </header>

      <!-- 主内容区 -->
      <main class="main-content">
        <!-- 欢迎消息 -->
        <section class="welcome-section">
          <h1>你好，<span id="userName">朋友</span></h1>
          <p id="welcomeMessage">准备好释放今天的压力了吗？</p>
        </section>

        <!-- 压力评估入口 -->
        <section class="assessment-card">
          <div class="card-content">
            <h2>压力评估</h2>
            <p>完成简短测试，了解你的压力状态</p>
            <div class="assessment-progress">
              <span id="lastAssessment">上次评估: 3天前</span>
            </div>
          </div>
          <button class="primary-btn" id="startAssessment">开始评估</button>
        </section>

        <!-- 游戏矩阵 -->
        <section class="games-section">
          <h2>解压游戏</h2>
          <div class="games-grid">
            <div class="game-card" data-game="flappy">
              <div class="game-icon">
                <img src="assets/flappy-icon.png" alt="像素小鸟" />
              </div>
              <h3>像素小鸟</h3>
              <p>重力感应飞行挑战</p>
            </div>
            <div class="game-card" data-game="knife">
              <div class="game-icon">
                <img src="assets/knife-icon.png" alt="飞刀结界" />
              </div>
              <h3>飞刀结界</h3>
              <p>360°随机弹道闪避</p>
            </div>
            <div class="game-card" data-game="bubble">
              <div class="game-icon coming-soon">
                <img src="assets/bubble-icon.png" alt="拟物泡泡纸" />
              </div>
              <h3>拟物泡泡纸</h3>
              <p>即将上线</p>
            </div>
            <div class="game-card" data-game="sand">
              <div class="game-icon coming-soon">
                <img src="assets/sand-icon.png" alt="动态沙画板" />
              </div>
              <h3>动态沙画板</h3>
              <p>即将上线</p>
            </div>
          </div>
        </section>

        <!-- 舒缓音效 -->
        <section class="asmr-section">
          <h2>环境音效</h2>
          <div class="asmr-grid">
            <div class="asmr-card" data-sound="rain">
              <div class="asmr-icon">
                <lottie-player
                  src="https://assets7.lottiefiles.com/packages/lf20_kki4yzua.json"
                  background="transparent"
                  speed="1"
                  style="width: 100%; height: 100%"
                  loop
                  autoplay
                ></lottie-player>
              </div>
              <h3>雨声</h3>
            </div>
            <div class="asmr-card" data-sound="forest">
              <div class="asmr-icon">
                <lottie-player
                  src="https://assets10.lottiefiles.com/packages/lf20_adtisofi.json"
                  background="transparent"
                  speed="1"
                  style="width: 100%; height: 100%"
                  loop
                  autoplay
                ></lottie-player>
              </div>
              <h3>森林</h3>
            </div>
            <div class="asmr-card" data-sound="fire">
              <div class="asmr-icon">
                <lottie-player
                  src="https://assets3.lottiefiles.com/packages/lf20_Aerz0y.json"
                  background="transparent"
                  speed="1"
                  style="width: 100%; height: 100%"
                  loop
                  autoplay
                ></lottie-player>
              </div>
              <h3>篝火</h3>
            </div>
            <div class="asmr-card premium" data-sound="ocean">
              <div class="asmr-icon">
                <lottie-player
                  src="https://assets9.lottiefiles.com/packages/lf20_UgZWvP.json"
                  background="transparent"
                  speed="1"
                  style="width: 100%; height: 100%"
                  loop
                  autoplay
                ></lottie-player>
              </div>
              <h3>海洋</h3>
              <span class="premium-badge">高级</span>
            </div>
          </div>
          <div class="audio-controls">
            <button id="playPauseBtn" class="control-btn">
              <span class="play-icon">▶</span>
              <span class="pause-icon hidden">❚❚</span>
            </button>
            <input
              type="range"
              id="volumeSlider"
              min="0"
              max="100"
              value="50"
            />
          </div>
        </section>

        <!-- 数据看板入口 -->
        <section class="data-insights">
          <h2>压力趋势</h2>
          <div class="insights-preview">
            <canvas id="pressureChart"></canvas>
          </div>
          <button class="secondary-btn" id="viewFullReport">
            查看完整报告
          </button>
        </section>
      </main>

      <!-- 底部导航 -->
      <nav class="bottom-nav">
        <a href="index.html" class="nav-item active" data-page="home">
          <span class="nav-icon home-icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
              <polyline points="9 22 9 12 15 12 15 22"></polyline>
            </svg>
          </span>
          <span class="nav-text">首页</span>
        </a>
        <a href="./views/games.html" class="nav-item" data-page="games">
          <span class="nav-icon games-icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <rect x="2" y="6" width="20" height="12" rx="2"></rect>
              <line x1="6" y1="12" x2="10" y2="12"></line>
              <line x1="8" y1="10" x2="8" y2="14"></line>
              <circle cx="16" cy="12" r="2"></circle>
              <circle cx="18" cy="10" r="1"></circle>
            </svg>
          </span>
          <span class="nav-text">游戏</span>
        </a>
        <a href="views/assessment.html" class="nav-item" data-page="assessment">
          <span class="nav-icon assessment-icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <line x1="18" y1="20" x2="18" y2="10"></line>
              <line x1="12" y1="20" x2="12" y2="4"></line>
              <line x1="6" y1="20" x2="6" y2="14"></line>
              <rect x="2" y="20" width="4" height="1"></rect>
              <rect x="8" y="20" width="4" height="1"></rect>
              <rect x="14" y="20" width="4" height="1"></rect>
            </svg>
          </span>
          <span class="nav-text">评估</span>
        </a>
        <a href="views/profile.html" class="nav-item" data-page="profile">
          <span class="nav-icon profile-icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
              <circle cx="12" cy="7" r="4"></circle>
            </svg>
          </span>
          <span class="nav-text">我的</span>
        </a>
      </nav>
    </div>

    <!-- 压力评估弹窗 -->
    <div class="modal" id="assessmentModal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>压力状态评估</h2>
          <span class="close-btn" id="closeAssessment">&times;</span>
        </div>
        <div class="modal-body">
          <div class="question-container">
            <div class="question-progress">
              <div class="progress-bar">
                <div class="progress-fill" id="assessmentProgress"></div>
              </div>
              <span id="questionCounter">1/10</span>
            </div>

            <div class="question" id="questionText">
              在过去的一周里，你是否经常感到无法控制生活中重要的事情？
            </div>

            <div class="options">
              <button class="option-btn" data-value="0">从不</button>
              <button class="option-btn" data-value="1">偶尔</button>
              <button class="option-btn" data-value="2">经常</button>
              <button class="option-btn" data-value="3">总是</button>
            </div>
          </div>

          <div class="results-container hidden" id="resultsContainer">
            <div class="result-header">
              <h2>评估结果</h2>
            </div>
            <div class="result-score">
              <div class="score-circle">
                <span id="resultScore">--</span>
              </div>
              <h3 id="resultLevel">中度压力</h3>
            </div>
            <div class="result-suggestions">
              <h3>减压建议</h3>
              <ul id="suggestionsList">
                <!-- 动态填充建议 -->
              </ul>
            </div>
            <button class="primary-btn" id="closeResults">了解</button>
          </div>
        </div>
      </div>
    </div>

    <audio id="backgroundAudio" loop></audio>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="app.js"></script>
  </body>
</html>
